<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>慕学在线网登录</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/login.css">
</head>
<body>
<div class="dialog" id="jsDialog">
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
    <h1>成功提交</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="cont">
        <h2>您的需求提交成功！</h2>
        <p></p>
    </div>
</div>
<div  class="noactivebox dialogbox" id="jsUnactiveForm" >
    <h1>邮件验证提示</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="center">
        <img src="/static/images/send.png"/>
        <p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">12@13.com</span>发送了邮件，<br/>为保证您的账号安全，请及时验证邮箱</p>
        <p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
        <p class="zy_success upmove"></p>
        <p style="display: none;" class="sendE2">没收到，您可以查看您的垃圾邮件和被过滤邮件，也可以再次发送验证邮件（<span class="c5c">60s</span>）</p>
        <p class="sendE">没收到，您可以查看您的垃圾邮件和被过滤邮件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次发送验证邮件</span></p>
    </div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
    <div class="c-box fff-box">
        <div class="wp header-box">
            <p class="fl hd-tips">慕学在线网，在线学习平台！</p>
            <ul class="fr hd-bar">
                <li>服务电话：<span>33333333</span></li>
                <li class="active"><a href="{% url "login" %}">[登录]</a></li>
                <li><a href="{% url "register" %}">[注册]</a></li>
            </ul>
        </div>
    </div>
</header>
<section>
    <div class="c-box bg-box">
        <div class="login-box clearfix">
            <div class="hd-login clearfix">
                <a class="index-logo" href="{% url 'login' %}"></a>
                <h1>用户登录</h1>
                <a class="index-font" href="{% url 'login' %}">回到首页</a>
            </div>
            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs">
                        {% for banner in banners %}
                            <li><a href="{{ banner.url }}"><img width="483" height="472" src="{{ banner.image.url }}" /></a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
            <div class="fl form-box">
                <div class="tab">
                    <h2 class="{% if dynamic_login %}{% else %}active{% endif %}" id="btn1">账号登录</h2>
                    <h2 class="{% if dynamic_login %}active{% else %}{% endif %}" id="btn2">动态登录</h2>
                </div>
                <form class="tab-form {% if dynamic_login %}hide{% else %}{% endif %}" action="{% url "login" %}?next={{ next }}" method="post" autocomplete="off" id="form1">
                    <div class="form-group marb20 {% if login_form.errors.username %}errorput{% endif %}">

                        <input name="username" id="account_l" value="{{ login_form.username.value }}" type="text" placeholder="手机号/邮箱" />
                            {# value="{{ login_form.username.value }}" 当字段错误(数据库没有)后，回填字段,login_form为表单类在前端显示为表单，所以可以用login_form.username.value得到username的值 #}
                    </div>
                    <div class="form-group marb8  {% if login_form.errors.password %}errorput{% endif %}">
                            {#    后端传递login_form的字典，如果该字段在 login_form.errors中，添加样式 errorput，input框有选中状态  #}
                        <input name="password" id="password_l" value="{{ login_form.password.value }}" type="password" placeholder="请输入您的密码" />
                    </div>
                    <div class="error btns login-form-tips" id="jsLoginTips">{% if login_form.errors %}{% for key,error in login_form.errors.items %}{{ error }}{% endfor %}{% else %}{{ msg }}{% endif %}</div>
                            {#    后端传递login_form的字典，如果该字段在 login_form.errors中，输出error信息，通过表单验证数据库查不到消息，输出msg  #}
{#                     <div class="auto-box marb38">#}
{#						<a class="fr" href="forgetpwd.html">忘记密码？</a>#}
{#                     </div>#}
                     <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > " />
                    {% csrf_token %}
                </form>
                <form class="tab-form {% if dynamic_login %}{% else %}hide{% endif %}" action="{% url "d_login" %}?next={{ next }}" id="mobile_register_form" autocomplete="off" method="post" id="form2">

                    <div class="form-group marb20">
                        <input id="jsRegMobile" name="mobile" value="{{ d_login_form.mobile.value|default_if_none:'' }}" type="text" placeholder="请输入您的手机号码">
                    </div>
                    <div class="form-group marb20 blur" id="jsRefreshCode">
                        {{ login_form.captcha }}
                            {#   会自动生成html    #}
                        {{ d_form.captcha }}
                    </div>
                    <div class="clearfix">
                        <div class="form-group marb8 verify-code">
                            <input id="jsPhoneRegCaptcha" value="{{ d_login_form.code.value|default_if_none:'' }}" name="code" type="text" placeholder="输入手机验证码">
                        </div>
                        <input class="verify-code-btn sendcode" id="jsSendCode" value="发送验证码">
                    </div>

                    <div class="error btns" id="jsMobileTips" style="">{% if d_login_form.errors %}{% for key,error in d_login_form.errors.items %}{{ error }}{% endfor %}{% else %}{{ msg }}{% endif %}</div>
                    <div class="auto-box marb8">
                    </div>
                    <input class="btn btn-green" id="jsMobileRegBtn" type="button" value="立即登录">
                    {% csrf_token %}
                </form>
                <p class="form-p">没有慕学在线网帐号？<a href="{% url "register" %}">[立即注册]</a></p>
            </div>
        </div>
    </div>
</section>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/validateDialog.js"  type="text/javascript"></script>
<script src="/static/js/login.js"  type="text/javascript"></script>
{#<script>#}
{#    $('#btn1').click(function(){#}
        {#$.ajax({#}
        {#    type: 'get',#}
        {#    url: '/login/',#}
{#            success:function () {#}
{#                {{ login_form.captcha.src }}#}
                {#var txt = $({{ login_form.captcha.src }});#}
                {#$("#jsRefreshCode").after(txt);#}
{##}
{#                {{ login_form.captcha }}#}
                {#console.log(typeof ())#}
                {#cap = value.toString({{ login_form.captcha }});#}
                {#document.getElementById("jsRefreshCode").append(cap)#}
{#            }#}
{#        });#}
{##}
            {#index = _self.index();#}
{#        window.location.replace('/login/');#}
{#        $(this).addClass('active').siblings().removeClass('active');#}
{#        $('.tab-form:first').removeClass('hide').siblings('.tab-form').addClass('hide');#}
{##}
{#    });#}
{#    $('#btn2').click(function(){#}
        {#window.location.replace('/login/');#}
{#        $.ajax({#}
{#            type: 'get',#}
{#            url: '/login/',#}
{#        });#}
{#        $(this).addClass('active').siblings().removeClass('active');#}
{#        $('.tab-form:last').removeClass('hide').siblings('.tab-form').addClass('hide');#}
{#    });#}
{#</script>#}
</body>
</html>
